'use client';

import React, { useState } from 'react';
import { Box } from '@mui/material';
import TopMenu from '@/app/components/TopMenu';
import SideMenu from '@/app/components/SideMenu';
import { SubMenu } from '@/app/_data/menu-data';

interface AppLayoutProps {
  children: React.ReactNode;
  submenus: SubMenu[];
}

const AppLayout: React.FC<AppLayoutProps> = ({ children, submenus }) => {
  const [isCollapsed, setIsCollapsed] = useState(false);

  const toggleCollapse = () => {
    setIsCollapsed(!isCollapsed);
  };

  return (
    <Box sx={{ display: 'flex' }}>
      <Box
        component="nav"
        sx={{
          width: isCollapsed ? '80px' : '240px',
          flexShrink: 0,
          transition: 'width 0.3s',
          height: '100vh',
          overflowX: 'hidden',
          borderRight: '1px solid #ddd',
        }}
      >
        <SideMenu submenus={submenus} isCollapsed={isCollapsed} />
      </Box>
      <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
        <TopMenu onToggleCollapse={toggleCollapse} />
        <Box component="main" sx={{ flexGrow: 1, p: 3, overflow: 'auto' }}>
          {children}
        </Box>
      </Box>
    </Box>
  );
};

export default AppLayout;
